<template>
  <div class="newslist">
    <van-card
      v-for="item in newsList"
      :key="item.id"
      :num="item.click"
      :price="item.add_time"
      :title="item.title"
      :thumb="item.img_url"
      @click="goDetail('/home/newsinfo', item.id)"
    >
      <template #title>
        <div class="van-ellipsis">
          {{ item.title }}
        </div>
      </template>
      <template #price>
        <div>
          {{ item.add_time }}
        </div>
      </template>
      <template #num>
        <div>阅读{{ item.click }}次</div>
      </template>
    </van-card>
  </div>
</template>
<script>
import { getNewsList } from '../../../../api/news'
export default {
  data: () => ({
    newsList: []
  }),
  created() {
    this.getNewsList()
  },
  methods: {
    async getNewsList() {
      const res = await getNewsList()
      this.newsList = res.data.message
    }
    // getDetail(id) {
    //   this.$router.push('/home/newsinfo/' + id)
    // }
  }
}
</script>
<style lang="less" scoped>
.newslist {
  .van-card__content {
    min-height: 55px;
  }
  .van-card__thumb {
    height: 55px;
  }
  .van-card__price {
    color: red;
  }
  // .van-card__title {
  //   /* 一行显示*/
  //   -webkit-line-clamp: 1;
  //   /* 将对象作为弹性伸缩盒子模型显示 */
  //   display: -webkit-box;
  //   /*子元素的排列方式 */
  //   -webkit-box-orient: vertical;
  //   text-overflow: ellipsis;
  //   overflow: hidden;
  //   word-break: break-all;
  // }
}
</style>